<template>
    <div>
        <el-card>
            <!--      搜索与添加区域-->
            <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.searchInfo" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>

            </el-row>

            <!--        表格-->
            <el-table

                    :data="pageuserlist"
                    border
                    style="width: 100%">
                <!--                <el-table-column-->
                <!--                        fixed-->
                <!--                        align="center"-->
                <!--                        type="index"-->
                <!--                        prop="examId"-->
                <!--                        label="#">-->
                <!--                    &lt;!&ndash; width="150">&ndash;&gt;-->
                <!--                </el-table-column>-->
                <el-table-column
                        align="center"
                        prop="examSn"
                        label="问卷序列号"
                >
                    <!--                    width="180">-->
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="createTime"
                        sortable
                        label="答题时间">
                    <!--                    width="220">-->
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="score"
                        label="得分"
                        sortable
                        width="100px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userId"
                        label="用户编号"
                        sortable
                        width="140px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userName"
                        label="用户姓名"
                        width="100px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userPhone"
                        label="用户手机号码"

                >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="160px"
                >
                    <template slot-scope="scope">

                        <el-button @click="showEditDialog(scope.row)" type="primary" :enterable="false" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 5, 7, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--    查看用户信息的对话框-->
        <el-dialog
                title="查看问卷信息"
                :visible.sync="showDialogVisible"
                width="50%" @close="showDialogClosed">
            <!--      内容主体区域-->
            <div style="margin-top:3%" v-for="(oneQuestionData,i) in question" :key="i" >
                <el-card style="margin-left:20%;margin-right:20%" v-if="isCardAlive">
                    <div slot="header" style="text-align: center" class="clearfix">
                        <span >{{ "问题"+oneQuestionData.questionSn +"："+ oneQuestionData.garbageName }}</span>

                    </div>
                    <div style="padding-bottom: 15px">
                        <div style="float: left">
                            <span v-if="radioDisabled">{{ '正确答案：'}}</span>
                            <span v-if="radioDisabled" style="color: #42b983">{{ oneQuestionData.sortName}}</span>
                        </div>
                        <div style="float: right">
                            <span v-if="radioDisabled">{{ '用户答案：'}}</span>
                            <span v-if="radioDisabled" style="color: orange">{{ oneQuestionData.answerName }}</span>
                        </div>
                    </div>

                </el-card>
                <!--      底部区域-->

            </div>
            <!--            <span slot="footer" class="dialog-footer">-->
            <div align="center" style="margin-top: 20px">
                <el-button type="primary" @click="showDialogClosed">确定</el-button>
            </div>

            <!--        </span>-->
        </el-dialog>
        <!--    修改用户信息的对话框-->
        <el-dialog
                title="修改用户信息"
                :visible.sync="editDialogVisible"
                width="50%" @close="editDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" status-icon ref="editFormRef" label-width="100px">
                <el-form-item prop="userId" label="用户编号">
                    <el-input class="rt-input" v-model="editForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userName" :rules="[{ required: true, message: '名称不能为空'}]" label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item prop="userCard" label="身份证号码">
                    <el-input class="rt-input" v-model="editForm.userCard"></el-input>
                </el-form-item>
                <el-form-item prop="userRole" label="用户类型">
                    <el-select v-model="editForm.userRole" placeholder="this">
                        <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetEdit">重置修改</el-button>
              <el-button type="primary" @click="editUser">确定修改</el-button>
            </span>
        </el-dialog>




    </div>
</template>
<style>
    .rt-input /deep/ .el-input__inner {
        color: #6B6C70 !important;
        cursor: pointer;
    }

    .avatar-uploader .el-upload {
        width: 100px;
        height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        position: relative;
        left: 35%;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: relative;
        top: 35px;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<script>

    export default {
        data() {
            return {
                notFound: '图片走丢了',
                uploadImageUrl: '',
                showImageUrl: '',
                fit: 'fill',
                isCardAlive:true,
                radioDisabled:true,
                total: 0,
                sortData:[],
                examList: [],
                question:[],
                radio: [],
                exam:'',
                garbageData: [],
                queryInfo: {
                    searchInfo: '',
                    // 当前页数
                    pagenum: 1,
                    pagesize: 7
                },
                row: '',
                showDialogVisible: false,
                editDialogVisible: false,
                editFormRules: {
                    garbageName: [
                        {
                            require: true,
                            message: '垃圾姓名不能为空',
                            trigger: 'blur'
                        }
                    ]
                },
                editForm: {
                    "examId": '',
                    "examSn": '',
                    "userId": '',
                    "score": '',
                    "createTime": ''
                }
            }
        },
        created() {
            this.getExamList();
            this.getSortList();
        },
        methods: {
            async getSortList() {
                const {data: res} = await this.$http.get('/sort/showAll')
                // console.log(res)
                if (res.status !== 200) {
                    return this.$message.error(res.msg+'，获取分类信息列表失败!')
                }
                // if (res.status == 200) {
                //     this.$message.success('获取分类信息列表成功!')
                // }
                this.sortData = res.data
                console.log(this.sortData[0].sortName)
            },
            setRole(row, column) {
                switch (row.userRole) {
                    case "admin":
                        return '管理员'
                    case "user":
                        return '普通用户'
                }
            },
            setStatus(row, column) {
                switch (row.userStatus) {
                    case "1":
                        return '审核通过'
                    case "0":
                        return '未审核'
                    case "2":
                        return '审核不通过'
                }
            },
            async getExamList() {
                let userId;
                if (localStorage.getItem('userId') != null)
                    userId = localStorage.getItem('userId')
                else
                    userId = sessionStorage.getItem('userId')
                const {data: res} = await this.$http.get('exam/showAll')
                if (res.status !== 200) {
                    return this.$message.error(res.msg + '，获取问卷信息列表失败!')
                }
                this.examList = res.data
                this.total = res.data.length
                console.log(res.data)
            },
            resetEdit() {
                const row = this.row
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // console.log(this.garbageData())
                // this.editDialogVisible = false
            },
            resetCreate() {
                this.editForm.userName = null
                this.editForm.userPhone = null
                this.editForm.userCard = null
                this.editForm.userRole = null
                this.editForm.formatRole = null
                this.editForm.userPerms = null
                this.editForm.userStatus = null
            },
            handleClick(row) {
                console.log(row);
            },
            filterTag(value, row) {
                return row.userRole === value
            },
            // 查看垃圾信息的对话框
            async showEditDialog(row) {
                this.showDialogVisible = true
                const examId = row.examId
                const {data: res} = await this.$http.get('/question/showByExam/' + examId)
                if (res.status !== 200) {
                    return this.$message.error(res.msg + '，获取问卷信息失败!')
                }
                this.exam = res.data.exam
                this.question = res.data.question
                console.log(this.question)

                this.row = row

            },
            // 编辑垃圾信息的对话框
            editEditDialog(row) {
                this.editDialogVisible = true
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // this.editForm = row
                this.row = row
            },
            pwdEditDialog(row) {
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userPwd = null
                this.pwdEditDialogVisible = true
            },

            checkEditDialog(row) {
                this.checkDialogVisible = true
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // this.editForm = row
                this.row = row
            },
            // 监听对话框的关闭事件
            showDialogClosed() {
                // this.$refs.editFormRef.resetFields()

                this.showDialogVisible = false
            },
            checkDialogClosed() {
                // this.$refs.editFormRef.resetFields()
                this.checkDialogVisible = false
            },
            editDialogClosed() {
                // this.$refs.editFormRef.resetFields()
                this.editDialogVisible = false
            },
            pwdEditDialogClosed() {
                this.pwdEditDialogVisible = false
            },
            createDialogClosed() {

                // this.$refs.editFormRef.resetFields()
                this.createDialogVisible = false
            },
            // 重置修改

            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                // alert(newSize)
                this.getUserList()
            },
            // 监听页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage)
                // alert(newPage)
                this.queryInfo.pagenum = newPage
                this.getUserList()
            },

        },

        computed: {
            pageuserlist: function () {
                var search = this.queryInfo.searchInfo
                if (search) {
                    return this.examList.filter(function (data) {
                        return Object.keys(data).some(function (key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.examList.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
            }
        }
    }
</script>
